<template>
  <div style="padding: 20px">
     <a-table
      :rowKey="pk"
      :columns="columns"
      :dataSource="dataSource"
      :loading="tableLoading"
      :size="size"
      :bordered="bordered"
      :scroll="scroll"
      :rowSelection="
        mode !== 'checkbox' && mode !== 'radio'
          ? null
          : {
              type: mode,
              selectedRowKeys: selectedRowKeys,
              fixed: true,
              onChange: onSelectChange,
            }
      "
      :pagination="
        !pagination
          ? false
          : {
              current: pageNo,
              pageSize: pageSize,
              total: total,
              showSizeChanger: true,
              showQuickJumper: true,
              pageSizeOptions: ['10', '20', '30'],
              showTotal: (total) => `共 ${total} 条`,
              onChange: jumpPage,
              onShowSizeChange: changePageSize,
            }
      "
    >
      <template v-slot:no='text, record, index'>
        <div>{{(pageNo -1) * pageSize + index + 1}}</div>
      </template>
      <template v-slot:action>
        <div class='action'>
          <a href="javascript:;">修改</a>
          <a-popconfirm :title="'确认删除？'" @confirm="handleConfirm">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
          <!-- <a href="javascript:;" @click="goDetail">详情</a> -->
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    pk: { type: String, default: 'id' },
    columns: { type: Array, default: () => [] },
    dataSource: { type: Array, default: () => [] },
    tableLoading: { type: Boolean, default: false },
    bordered: { type: Boolean, default: false },
    pagination: { type: Boolean, default: true },
    total: { type: Number, default: 0 },
    size: { type: String, default: 'default' },
    mode: { type: String, default: '' },
    active: { type: Array, default: () => [] },
    scroll: { type: Object, default: () => {} }
  },
  data () {
    return {
      selectedRowKeys: this.active,
      pageNo: 1,
      pageSize: 10
    }
  },
  methods: {
    jumpPage (pageNo, pageSize) {
      this.pageNo = pageNo || this.pageNo
      this.pageSize = pageSize || this.pageSize
      this.$emit('queryData', { pageNo: pageNo, pageSize: pageSize })
    },
    changePageSize (pageNo, pageSize) {
      this.pageNo = 1
      this.pageSize = pageSize
      this.$emit('queryData', { pageNo: 1, pageSize: pageSize })
    },
    // 选中，取消选中
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      this.$emit('select', this.selectedRowKeys)
    },
    // 清空selectedRowKeys
    clearSelect () {
      this.selectedRowKeys = []
    },
    // 在父组件刷新数据时调用子组件传入当前分页参数
    refreshData () {
      this.$emit('queryData', { pageNo: this.pageNo, pageSize: this.pageSize })
    },
    handleConfirm () {
      console.log('删除咯')
    },
    goDetail () {
      this.$router.push({ name: 'tableDetail' })
    }
  }
}
</script>

<style lang="less" scoped>
.action {
  display: flex;
  justify-content: space-around;
}
</style>
